<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom: 20px">
        <div class="chart-wrapper inputTop">
          <el-row :gutter="32" class="rowPda">
            <el-col :xs="24" :sm="8" :lg="6" class="flex">
              <el-input
                v-model="listQuery.roleName"
                placeholder="请输入搜索内容"
                class="btnScr"
                :xs="24"
                :sm="12"
                :lg="16"
              />
              <el-button
                type="primary"
                icon="el-icon-search"
                class="btnScrright"
                :xs="24"
                :sm="12"
                :lg="8"
                @click="roleList()"
                >搜索</el-button
              >
            </el-col>
            <el-col
              :xs="24"
              :sm="16"
              :lg="18"
              class="agg"
              style="text-align: right"
            >
              <el-button class="add" type="" @click="add">新增</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <div style="height: 10px" />
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <el-table
            :data="tableData"
            style="width: 100%"
 
            :border="false"
            stripe
            :default-sort="{ prop: 'five' }"
            :row-class-name="tableClass"
          >
            <el-table-column
              prop="num"
              label="序号"
              min-width="30%"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              label="角色"
              prop="name"
              min-width="50"
              align="center"
            />
            <el-table-column
              prop="description"
              label="角色描述"
              min-width="50"
              align="center"
            />
            <el-table-column
              prop="createdTime"
              min-width="50"
              label="添加时间"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ formatDot(scope.row.createdTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  :disabled="scope.row.canDeleted === 0"
                  size="small"
                  @click="edit(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  :disabled="scope.row.canDeleted === 0"
                  size="small"
                  @click="del(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!---->
          <el-pagination
            background
            :current-page="listQuery.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="7"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <!---->
        </div>
      </el-col>
    </el-row>
    <!---->
    <myModal :obj="objFour" @save="determine">
      <div class="mpdalBody">
        <h4>确定删除吗？</h4>
      </div>
    </myModal>
    <!---->

    <!---->
    <el-dialog
      title=""
      width="1117px"
      custom-class="myDigo inputTop"
      :show-close="false"
      :visible.sync="show"
    >
      <h2>
        {{ editId ? "编辑角色" : "新增角色"
        }}<i class="el-icon-close" @click="close" />
      </h2>
      <!---->
      <div class="digoDiv">
        <el-form
          ref="form"
          :model="roleForm"
          label-width="85px"
          class="formDiv"
          :rules="rules"
        >
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item prop="name" label="角色名称:">
                <el-input
                  v-model="roleForm.name"
                  placeholder="输入4～8位文字或字母"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item prop="description" label="角色描述:">
                <el-input
                  v-model="roleForm.description"
                  placeholder="最多输入20个字"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <table cellpadding="0" cellspacing="0" class="mytableBor">
            <thead>
              <th class="s1">第一级菜单</th>
              <th class="s2">第二级菜单</th>
              <th class="s3">权限</th>
            </thead>
            <tbody>
              <tr v-for="(first, index) in permissonList" :key="index">
                <td class="s1">
                  <el-checkbox
                    v-model="first.checked"
                    :label="first.name"
                    @change="(val) => checkChange(first.id, val)"
                  />
                </td>
                <td class="s2">
                  <el-checkbox
                    v-for="(second, index) in first.children"
                    :key="index"
                    :label="second.name"
                    v-model="second.checked"
                    @change="(val) => checkChange(second.id, val)"
                  />
                </td>
                <td class="s3">
                  <p>
                    <el-checkbox
                      v-for="(third, i) in first.children2"
                      :key="i"
                      :label="third.name"
                      v-model="third.checked"
                      @change="(val) => checkChange(third.id, val)"
                    />
                  </p>
                </td>
              </tr>
            </tbody>
          </table>
        </el-form>
      </div>
      <!---->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="disabled" @click="save()"
          >确认</el-button
        >
        <el-button class="grey-btn" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import myModal from "@/components/Modal";
import {
  getRoleList,
  newRoleDel,
  getRole,
  addRole,
  editRole,
} from "@/api/resource";
import { formatDot } from "@/utils/common";

export default {
  components: { myModal },
  // props: {
  //   obj: {
  //     type: Object
  //   }
  // },
  data() {
    return {
      formatDot,
      editId: null,
      show: false,
      disabled: true,
      roleForm: {
        name: "",
        description: "",
        resourceList: [],
      },
      permissonList: [],
      currentPage4: 1,
      tableData: [],
      id: "",

      objFour: {
        show: false,
        title: "角色设置",
        width: "647px",
      },
      listQuery: {
        roleName: "",
        page: 1,
        limit: 10,
      },
      rules: {
        description: [
          {
            required: true,
            message: "最多可输入20个字",
            trigger: "blur",
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{0,20}$/,
          },
        ],
        name: [
          {
            required: true,
            message: "只可输入4~8位文字和数字",
            trigger: "blur",
            pattern: /^[0-9\u4e00-\u9fa5]{4,8}$/,
          },
        ],
      },
      sizeForm: {},
      radio: 3,
    };
  },

  watch: {
    roleForm: {
      handler(newVal, oldVal) {
        if (newVal.description && newVal.name) {
          this.disabled = false;
        } else {
          this.disabled = true;
        }
      },
      deep: true,
    },
  },
  created() {
    this.roleList();
  },
  mounted() {
    this.$parent.$on("searchData", (val) => {
      this.listQuery.roleName = val;
      this.roleList();
    });
  },

  methods: {
    async roleList() {
      var res = await getRoleList(this.listQuery);
      if (res.code === 200) {
        this.tableData = res.data;
      }
    },
    del(id) {
      this.id = id;
      this.objFour.show = true;
    },
    async determine() {
      await newRoleDel(this.id);
      this.roleList();
      this.objFour.show = false;
    },
    async edit(row) {
      // console.log(row);
      this.show = true;
      this.editId = row.id;
      var res = await getRole({ roleId: row.id });
      this.roleForm = {
        name: row.name,
        description: row.description,
        resourceList: [],
      };
      this.transformPermission(res.data);
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.roleList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.roleList();
    },

    transformPermission(data) {
      this.permissonList = data.map((item) => {
        if (item.checked === "Y") {
          item.checked = true;
          this.roleForm.resourceList.push(item.id);
        } else {
          item.checked = false;
        }
        return {
          ...item,
          children2: item.children.reduce((a, b) => {
            if (b.checked === "Y") {
              b.checked = true;
              this.roleForm.resourceList.push(b.id);
            } else {
              b.checked = false;
            }
            return a.concat(b.children);
          }, []),
        };
      });
    },

    async add() {
      var res = await getRole();
      this.transformPermission(res.data);
      this.show = true;
    },

    filterList(val) {
      var list = this.permissonList;
      list.forEach((item, i) => {
        var childAllChecked = item.children.some((it) => it.checked);
        if (!item.checked && childAllChecked) {
          list[i].checked = childAllChecked;
        }
      });
      return list;
    },

    checkChange(id, val) {
      if (val) {
        this.roleForm.resourceList.push(id);
      } else {
        var list = this.roleForm.resourceList.filter((item) => item !== id);
        this.roleForm.resourceList = list;
      }
      this.permissonList = this.filterList();
    },

    close() {
      this.show = false;
      this.editId = null;
      this.roleForm = {
        name: "",
        description: "",
        resourceList: [],
      };
      this.permissonList = [];
    },
    cancel() {
      this.roleForm = {
        name: "",
        description: "",
        resourceList: [],
      };
      this.show = false;
      this.permissonList = [];
    },
    async save() {
      var res;
      if (this.editId) {
        res = await editRole(this.editId, this.roleForm);
      } else {
        res = await addRole(this.roleForm);
      }

      if (res.code === 200) {
        this.show = false;
        this.roleList();
      }
    },
    tableClass(row) {
      // console.log("--------------", row);
      if (row.canDeleted === 0) {
        return "grey";
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table th.is-leaf,
::v-deep .el-table td,
::v-deep .el-table__body {
  border: 0;
}
::v-deep .el-table::before,
::v-deep .el-table__fixed-right::before {
  display: none;
}
::v-deep th {
  background: #f7f7f7;
  font-weight: normal;
  color: #101010;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 8px !important;
}
.add {
  background: #5ac6b7;
  color: #fff;
  border: 0;
  border-radius: 2px;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 8px !important;
}
.btnScr {
  width: 100%;
  margin-bottom: 15px;
}
::v-deep .btnScr input {
  border-radius: 2px;
}
.btnScrright {
  border-radius: 2px;
  margin-top: -15px;
}
.agg {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
@media (max-width: 1200px) {
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
.myDigo h2 {
  background: #343436;
}
::v-deep .myDigo .el-dialog__footer {
  background: #e5e9ed;
  padding-top: 15px;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog.myDigo .el-dialog__header {
  display: none;
}
.el-dialog.myDigo h2 {
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 39px;
  padding-right: 39px;
  color: #fff;
  font-size: 18px;
  padding-top: 0;
  margin-top: 0;
  overflow: hidden;
  font-weight: normal;
  font-family: "SourceHanSansSC-regular";
}
.el-dialog.myDigo h2 i {
  font-size: 26px;
  cursor: pointer;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  text-align: left;
}
.mtright {
  margin-right: 5px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 70px;
  height: 56px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item div.filediv {
  width: 100%;
  height: 100%;
}
::v-deep .el-upload--picture-card {
  width: 70px;
  height: 56px;
  line-height: 66px;
}
::v-deep .el-upload__text {
  line-height: initial;
  color: #cacaca;
  margin-top: -10px;
  font-size: 12px;
}
.right10 {
  margin-left: 10px;
}
.right20 {
  margin-left: 20px;
}
::v-deep .itxt label {
  font-weight: normal;
  font-size: 12px;
}
::v-deep .itxt {
  margin-bottom: 15px;
}
::v-deep .itxtactive label {
  color: #5ac6b7;
}
.borbtoonline {
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: -15px;
}
.bortopline {
  margin-top: 15px;
}
.borbtoonline .el-form-item {
  margin-bottom: 10px;
}
.formDiv {
  padding-left: 39px;
  padding-right: 39px;
}
.rowPda {
  padding-right: 10px;
}

.mytableBor {
  border: 1px solid #b4b4b4;
  width: 100%;
  margin-bottom: 20px;
  table-layout: fixed;
  .s1 {
    width: 150px;
  }
  .s2 {
    width: 300px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    label {
      margin-bottom: 10px;
    }
    label:last-child {
      margin-bottom: 0px;
    }
  }
}
.mytableBor thead th {
  border-bottom: 0px solid #b4b4b4;
  text-align: center;
  border-right: 1px solid #b4b4b4;
  padding: 15px 0;
}
.mytableBor thead th:last-child {
  border-right: 0;
}
.mytableBor tbody tr {
  border-bottom: 1px solid #b4b4b4;
}
.mytableBor td {
  border-right: 1px solid #b4b4b4;
  text-align: center;
  padding: 15px 0;
  border-top: 1px solid #b4b4b4;
}
.mytableBor .s3 {
  width: 617px;
}
.mytableBor td:last-child {
  border-right: 0;
}
.mytableBor td.s2 p {
  margin: 0;
  padding: 0;
  text-align: left;
  width: 120px;
  margin: 0 auto;
  line-height: 30px;
}
.mytableBor td:last-child {
  border-right: 0;
}
.mytableBor td.s3 p {
  text-align: left;
  padding-left: 15px;
}
</style>

<style>
@media (min-width: 1200px) {
  .inputTop input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }

  .inputTop input:-moz-placeholder,
  textarea:-moz-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }

  .inputTop input::-moz-placeholder,
  textarea::-moz-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }

  .inputTop input:-ms-input-placeholder,
  textarea:-ms-input-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }

  .grey {
    color: #ccc !important;
  }
}
.el-checkbox {
  margin-right: 0;
  width: 110px;
  text-align: left;
}
</style>

